<template>
  <el-config-provider
    :namespace="namespace"
    :locale="elementPlusLocale"
    :message="config.message"
    :z-index="config.zIndex"
    :size="config.size"
  >
    <slot />
  </el-config-provider>
</template>

<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import { computed, PropType } from 'vue'
import { useLocale } from '@/hooks/web/useLocale'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'

export interface GlobalConfig {
  namespace?: string
  size?: 'large' | 'default' | 'small'
  zIndex?: number
  message?: {
    max?: number
  }
  locale?: LocaleType
  // Theme configuration
  primaryColor?: string
  isMobile?: boolean
  isCollapsed?: boolean
  layout?: 'classic' | 'modern'
  isDark?: boolean
}

defineOptions({ name: 'ConfigGlobal' })

const props = defineProps({
  config: {
    type: Object as PropType<GlobalConfig>,
    default: () => ({
      namespace: 'el',
      size: 'default',
      zIndex: 2000,
      message: { max: 10 },
      locale: 'zh-CN' as LocaleType
    })
  }
})

const emit = defineEmits<{
  'config-change': [config: GlobalConfig]
}>()

const { getCurrentLocale } = useLocale() 

const namespace = computed(() => props.config.namespace || 'el')

const elementPlusLocale = computed(() => {
  const currentLocale = props.config.locale || getCurrentLocale()
  return currentLocale === 'zh-CN' ? zhCn : en
})

// Methods for external configuration (can be called by parent)
const updateConfig = (newConfig: Partial<GlobalConfig>) => {
  const updatedConfig = { ...props.config, ...newConfig }
  emit('config-change', updatedConfig)
}

// Expose methods for external use
defineExpose({
  updateConfig
})
</script>
